<script setup lang="ts" name="Home01">
    import{ref} from 'vue'
    let user = ref({id:1001,age:18,name:'admin'})

    function changeAge(){
        //console.log(user)//返回的是RefImpl - value

        //`ref`对象的`value`属性是响应式的
        //即使使用ref来定义对象类型 - 底层仍然在使用reactive,因为看到返回结果是Proxy
        //使用reactive定义的对象类型,打印出来返回的Proxy - 对象的属性具备响应式
        //user.value返回的是proxy=>检测属性值的改变
        user.value.age++
    }
    function changeUser(){
        
        //console.log(user.value);//返回的是Proxy

        //回归到ref本身 = > 检测value
        //总结解释: 1. 当你使用 ref 创建一个引用时，它会返回一个包含 value 属性的对象，
        //           value 属性本身是响应式的

        //2. 将 user.value 重新赋值为一个新的对象。由于 user.value 是响应式的，
        // Vue 会检测到这个变化，并更新视图。虽然 user.value 本身是一个 Proxy 对象，
        //但当你重新赋值时，user.value 会被替换为一个新的 Proxy 对象。

        user.value = {id:1002,age:19,name:'jack'} // 页面更新

        //Object.assign(user.value,{id:1002,age:19,name:'jack'}) // 页面更新
    }
</script>
<template>
    <h4>ref本质上是最建议用来定义基本数据类型的响应式 √</h4>
    <h1 class="c1">ref同样也是可以用来定义对象数据类型 ※</h1>
    <h4>reactive只能被应用对对象类型的响应式,不能够应用于基本数据类型 √</h4>
    <hr>
    <h3>姓名:{{user.name}}</h3>
    <h3>年龄:{{user.age}}</h3>
    <button @click="changeAge">age+1</button>
    <button @click="changeUser">改变整个user</button>
</template>
<!-- scoped 当前style中的样式仅仅应用于当前的vue组件 - 局部样式 -->
<style scoped>
    .c1{
        background-color: red;
        color: #fff;
        border: 1px solid solid;
    }
</style>